<!-- 导入合同 -->
<template>
  <div class='contract_modal'>
    <!-- 导入合同 -->
    <div class="step3Box">
      <div class="step3Text">
        第一步<br />
        请按照数据模板的格式准备导入合同信息数据
        <div class="stepDownload" @click="reImportTemplate">
          <Icon type="md-download" />下载合同信息数据模板
        </div>
      </div>
      <div class="step3Text">第二步 <br />请填写好合同信息相关内容</div>
      <div class="step3Text">
        第三步<br />
        请上传已填写的“合同信息数据模板”
        <div>
          <Upload :action="upload.reqUrl" :format="['xlsx', 'xls', 'XLS', 'XLSX']" ref="upload"
            :headers="upload.headers" :on-format-error="handleFormatError" :data="upload.data"
            :before-upload="handleBefore" :on-success="handleSuccess"
            :show-upload-list="false">
            <Button icon="ios-cloud-upload-outline">上传文件</Button>
          </Upload>
        </div>
        <span style="display: inline-block; margin-top: 10px">{{
            step3File.name
          }}</span>
      </div>
    </div>
    <div class="flex flex-horizontal-end btn-operate">
      <Button @click="handleClose">取消</Button>
      <Button type="primary" @click="submitFun()" style="margin-left: 8px">导入合同</Button>
    </div>
  </div>
</template>

<script>
  import deliveryMgr from '@/biz/delivery/control'
  export default {
    data() {
      return {
        dataParams: {},
        step3File: '', //上传文件的
        upload: deliveryMgr.importBargain(),
      }
    },
    methods: {
      reImportTemplate() {
        console.log(this.$parent.$parent.filterParams)
        let params = Object.assign({}, this.$parent.$parent.filterParams)
        deliveryMgr.exportBargain(params)
      },
      handleClose() {
        this.step3File = ''
        this.$emit('onClose')
      },
      submitFun() {
        if (this.step3File) {
          this.$refs.upload.post(this.step3File)
          this.step3File = ''
        } else {
          this.$Message.warning('请上传已填写的“合同信息数据模板”')
        }
      },
      // 导入格式判断
      handleFormatError(file) {
        this.$Message.error('只支持上传Excel表格！')
      },
      // 导入前
      handleBefore(file) {
        console.log(file, '导入的文件')
        this.step3File = file
        return false
      },
      // 上传成功
      handleSuccess(res, file) {
        if (res.code == 500) {
          this.$Message.error(res.msg)
          console.log('500')
        } else {
          this.$Message.success('数据导入成功！')
          this.$emit('onClose')
          this.$emit('onSearch')
        }
        console.log(res, file, '上传成功')
      },
    },
  }
</script>
<style lang='scss' scoped>
  .step3Box {
    padding: 0 50px 20px;

    .step3Text {
      margin-top: 30px;
      line-height: 1.5;

      >div {
        margin-top: 10px;
      }

      .stepDownload {
        cursor: pointer;
        color: #2d8cf0;
        display: block;
        margin: 10px 0;
      }
    }
  }

  .newBuildingFooter {
    padding-top: 16px;
    text-align: center;

    button {
      width: 90px;
      margin: 0 10px;
    }
  }
</style>